<template>
  <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
    <div class="relative">
      <img :src="newsItem.image" :alt="newsItem.title" class="w-full h-48 object-cover">
      <button 
        @click="handleFavoriteClick" 
        class="absolute top-2 right-2 bg-white/80 p-2 rounded-full"
        :aria-label="isFavorite ? '取消收藏' : '收藏'"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path 
            stroke-linecap="round" 
            stroke-linejoin="round" 
            stroke-width="2" 
            :d="isFavorite ? 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z' : 'M12 3v1m6.364.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'"
            :class="isFavorite ? 'text-red-500 fill-red-500' : 'text-gray-400'"
          />
        </svg>
      </button>
    </div>
    <div class="p-4">
      <div class="flex justify-between items-center mb-2">
        <span class="text-xs font-semibold text-blue-500 bg-blue-100 px-2 py-1 rounded">
          {{ newsItem.category }}
        </span>
        <span class="text-xs text-gray-500">{{ newsItem.date }}</span>
      </div>
      <h3 class="text-lg font-bold mb-2 line-clamp-2">
        <router-link :to="{ name: 'NewsDetail', params: { id: newsItem.id }}" class="hover:text-blue-500">
          {{ newsItem.title }}
        </router-link>
      </h3>
      <p class="text-gray-600 text-sm mb-4 line-clamp-3">{{ newsItem.summary }}</p>
      <router-link 
        :to="{ name: 'NewsDetail', params: { id: newsItem.id }}"
        class="text-blue-500 hover:text-blue-700 text-sm font-medium"
      >
        阅读全文 →
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useFavoritesStore } from '../store'

const props = defineProps({
  newsItem: {
    type: Object,
    required: true,
    properties: {
      id: { type: Number, required: true },
      title: { type: String, required: true },
      summary: { type: String, required: true },
      image: { type: String, required: true },
      date: { type: String, required: true },
      category: { type: String, required: true }
    }
  }
})

const emit = defineEmits(['toggle-favorite'])
const favoritesStore = useFavoritesStore()
const isFavorite = computed(() => favoritesStore.isFavorite(props.newsItem.id))

const handleFavoriteClick = () => {
  favoritesStore.toggleFavorite(props.newsItem)
}
</script>